<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="content-section">
    <h2><i class="fas fa-hospital"></i> 病房管理</h2>
    
    <div class="filter-section">
        <select id="wardDeptSelect" class="dept-select" onchange="updateWardList()">
            <option value="">所有科室</option>
        </select>
    </div>
    
    <table class="data-table">
        <thead>
            <tr>
                <th>科室</th>
                <th>楼层</th>
                <th>病房号</th>
                <th>总床位数</th>
                <th>可用床位数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="wardTableBody">
        </tbody>
    </table>
</div>

<!-- 添加模态框 -->
<div id="wardDetailModal" class="modal" style="display: none;">
    <div class="modal-content">
        <h3>病房详细信息</h3>
        <div id="wardDetailContent">
            <!-- 病床信息将在这里动态加载 -->
        </div>
        <div class="form-buttons">
            <button type="button" class="btn btn-secondary" onclick="hideWardDetailModal()">关闭</button>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 页面加载完成后初始化数据
    initializeWardManage();
});

function initializeWardManage() {
    loadDepartments();
    loadWards();
}

// 加载科室列表
function loadDepartments() {
    $.get('/0201/admin/departments', function(departments) {
        var select = $('#wardDeptSelect');
        select.find('option:not(:first)').remove(); // 清除旧的选项
        departments.forEach(function(dept) {
            select.append($('<option>', {
                value: dept.deptId,
                text: dept.deptName
            }));
        });
    });
}

// 更新病房列表
function updateWardList() {
    var deptId = $('#wardDeptSelect').val();
    loadWards(deptId);
}

// 加载病房信息
function loadWards(deptId) {
    var url = '/0201/admin/wards';
    if (deptId) {
        url += '?deptId=' + deptId;
    }
    
    $.get(url, function(wards) {
        var tbody = $('#wardTableBody');
        tbody.empty();
        
        wards.forEach(function(ward) {
            var row = $('<tr>')
                .attr('id', 'ward-' + ward.wardId)
                .attr('data-ward-id', ward.wardId);
                
            row.append($('<td>').text(ward.deptName));
            row.append($('<td>').text(ward.floorNum));
            row.append($('<td>').text(ward.wardNum));
            row.append($('<td>').text(ward.bedCount));
            row.append($('<td>').text(ward.availableBeds));
            
            // 创建操作列，包含查看和增加病床按钮
            var operationCell = $('<td>');
            
            // 查看按钮
            var viewButton = $('<button>')
                .addClass('btn btn-info btn-sm mr-2')
                .html('<i class="fas fa-eye"></i> 查看')
                .click(function() {
                    showWardDetail(ward.wardId);
                });
                
            // 增加病床按钮
            var addBedButton = $('<button>')
                .addClass('btn btn-success btn-sm')
                .html('<i class="fas fa-plus"></i> 增加病床')
                .click(function() {
                    confirmAddBed(ward.wardId, ward.wardNum);
                });
            
            operationCell.append(viewButton).append(' ').append(addBedButton);
            row.append(operationCell);
            
            tbody.append(row);
        });
    });
}

// 添加确认增加病床的函数
function confirmAddBed(wardId, wardNum) {
    if (confirm('确定要为 ' + wardNum + ' 号病房增加一张病床吗？')) {
        $.ajax({
            url: '/0201/admin/addBed',
            type: 'POST',
            data: { wardId: wardId },
            success: function(response) {
                alert('增加病床成功！');
                loadWards($('#wardDeptSelect').val()); // 刷新病房列表
            },
            error: function(xhr) {
                var errorMsg = '增加病床失败';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                alert(errorMsg);
            }
        });
    }
}

// 显示病房详细信息
function showWardDetail(wardId) {
    $.get('/0201/wardDetail', {
        wardId: wardId
    }, function(beds) {
        var content = $('#wardDetailContent');
        content.empty();
        
        // 创建床位信息表格
        var table = $('<table>').addClass('bed-table');
        var thead = $('<thead>').append(
            $('<tr>').append(
                $('<th>').text('床位号'),
                $('<th>').text('状态'),
                $('<th>').text('病人信息')
            )
        );
        var tbody = $('<tbody>');
        
        beds.forEach(function(bed) {
            var row = $('<tr>');
            row.append($('<td>').text(bed.bedNum));
            row.append($('<td>').text(bed.status==1?'入住':'空闲'));
            
            // 如果有病人，显示病人信息
            var patientInfo = bed.patientName ? 
                bed.patientName :
                '空床';
            row.append($('<td>').text(patientInfo));
            
            tbody.append(row);
        });
        
        table.append(thead).append(tbody);
        content.append(table);
        $('#wardDetailModal').show();
    });
}

function hideWardDetailModal() {
    $('#wardDetailModal').hide();
}
</script>

<style>
.filter-section {
    margin-bottom: 20px;
}

.dept-select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
    font-size: 14px;
}

.dept-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.data-table th,
.data-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.data-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.data-table tr:hover {
    background-color: #f9f9f9;
}

.btn-info {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-info:hover {
    background-color: #138496;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 600px;
    max-width: 90%;
}

.bed-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 15px;
}

.bed-table th,
.bed-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

.bed-table th {
    background-color: #f5f5f5;
}

.form-buttons {
    text-align: right;
    margin-top: 15px;
}

.btn-sm {
    font-size: 0.875rem;
}
</style> 